# Component: Tag Cloud

Flexible wrapper for weighted taxonomy visualization

Layout Block

### BEM Anatomy

| Type      | Class Name      | Description                                                                                        |
| --------- | --------------- | -------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-tag-cloud` | The master flex container. Allows tags to wrap and aligns them centrally for a balanced aesthetic. |
| Element   | `__item`        | The wrapper for each individual tag. Acts as the anchor point for the `TagButtonComponent`.        |

### Weighted Visualization Logic

The `Tag Cloud` relies on a dynamic `FontSize` calculation. By passing a value from `GetFontSizeFromCount(tag.UsageCount)` to the child atom, tags with higher usage appear larger, creating a classic weighted cloud effect. The `IsActive` state handles highlighting when a specific keyword filter is applied.

##### Generated HTML

```html
<div class="as-tag-cloud">
    <div class="as-tag-cloud__item">
        <!-- Large tag for high usage -->
        <button class="as-tag" style="--bs-btn-font-size: 1.5rem">...</button>
    </div>
    <div class="as-tag-cloud__item">
        <!-- Smaller tag for low usage -->
        <button class="as-tag" style="--bs-btn-font-size: 0.8rem">...</button>
    </div>
</div>
```

##### SCSS

```scss
.as-tag-cloud {
  display: flex;
  flex-wrap: wrap;       // Allows multi-line clouds
  align-items: center;   // Vertically aligns small/large tags
  
  &__item {
    // Styling usually inherited from 
    // the inner .as-tag spacing
  }
}
```
